@font-face {
    font-family: "icons-turn-arrow";
    src: url("../fonts/icons/turn-arrow.eot") format("embedded-opentype"), url("../fonts/icons/turn-arrow.woff") format("woff"), url("../fonts/icons/turn-arrow.ttf") format("truetype"), url("../fonts/icons/turn-arrow.svg") format("svg");
}

html, body {
    width: 100%;
    height: 100%;

    background-color: #222;
}

.content {
    width: 100%;
    height: 100%;
}

/* stage -- start */
.stage {
    position: relative;

    width: 100%;
    height: 680px;
}
/* stage -- end */

/* image -- start */
.img-sec {
    position: relative;

    width: 100%;
    height: 100%;
    overflow: hidden;

    background-color: #ddd;

    perspective: 1800px;

    @at-root {
        .img-figure {
            position: absolute;

            width: 320px;
            height: 360px;
            margin: 0;
            padding: 40px;

            background-color: #fff;

            box-sizing: border-box;
            cursor: pointer;
            transform-origin: 0 50% 0;
            transform-style: preserve-3d;
            transition: transform .6s ease-in-out, left .6s ease-in-out, top .6s ease-in-out;

            &.is-inverse {
                transform: translate(320px) rotateY(180deg);
            }
        }

        figcaption {
            text-align: center;

            .img-title {
                margin: 20px 0 0 0;

                color: #a7a0a2;
                font-size: 16px;
            }

            .img-back {
              position: absolute;
              top: 0;
              left: 0;

              width: 100%;
              height: 100%;
              padding: 50px 40px;
              overflow: auto;

              color: #a7a0a2;
              font-size: 22px;
              line-height: 1.25;
              text-align: left;

              background-color: #fff;

              box-sizing: border-box;
              transform: rotateY(180deg) translateZ(1px);
              backface-visibility: hidden;

              p {
                margin: 0;
              }
            }
        }
    }

}
/* image -- end */

/* controller -- start */
.controller-nav {
    position: absolute;
    left: 0;
    bottom: 30px;
    z-index: 101;

    width: 100%;

    text-align: center;

    @at-root {
        .controller-unit {
            display: inline-block;
            margin: 0 5px;
            width: 30px;
            height: 30px;

            text-align: center;
            vertical-align: middle;

            cursor: pointer;
            background-color: #aaa;
            border-radius: 50%;

            transform: scale(.5);
            transition: transform .6s ease-in-out, background-color .3s;

            &.is-center {
                background-color: #888;

                transform: scale(1);

                &::after {
                    color: #fff;
                    font-family: "icons-turn-arrow";
                    font-size: 80%;
                    line-height: 30px;

                    content: "\e600";

                    -webkit-font-smoothing: antialiased;
                    -moz-osx-font-smoothing: grayscale;
                }

                &.is-inverse {
                    background-color: #555;

                    transform: rotateY(180deg);
                }
            }
        }
    }
}
/* controller -- end */
